Pixel

Share

What is a Pixel?

The word pixel has multiple meanings, they are:

  1. A single colored square (or rectangle) in a raster image. The data of almost every image and video in a computer is composed entirely of these pixels.
  2. A single colored dot on a physical computer screen, which is similar but slightly different from the concept above.
  3. The term is also used in names of some products, such as the Google Pixel, which is a smartphone.
  4. A kind of fairy. You can find them in some video-games.

What are Pixels in Images?

Most digital images are raster images. A raster image is a rectangle that is divided into a grid of tiny squares (or rectangles, as we will see below). Each of these squares is called a pixel.

The most important thing about a pixel is that one single pixel can only have one single color. This means there are no pixels start red on the left side and end blue on the right side. They're either completely red or completely blue, or completely some other color. i.e. each pixel has a solid color.

The dimensions of raster images are measured in pixels. For example, an image that has 2000 pixels of width by 1000 pixels of height (or 2000x1000px), would have 2 million pixels in total, or 2 megapixels.

The only data a pixel contains is color data. Colors can be encoded in various color models, such as RGB, CMYK, L*A*B*, XYZ, YCbCr, and all of these plus alpha (e.g. RGBA). This alpha channel is used to store the transparency/opacity level of the pixel. In each of these models, there is a number of color channels, e.g. Red, Green, Blue. Each channel has a separate value. These values are numbers that go from 0% to 100% in some scale. If we use 8 bits to store the value of one channel (24 bits per pixel for RGB), then the scale is from 0 to 255. We can write these values using hexadecimal digits, e.g. FF is 255. Since we have 3 channels and it takes 2 hexadecimal digits to write the maximum value of one 8-bit channel, we would need 6 digits to write all possible values. This is the RGB hex color code we usually find around, e.g. #FF8800.

When indexing pixels, the coordinates system used is typically X, Y (horizontal, vertical), starting from 0, 0 at top-left. That is, the pixel at the top-left position has the coordinates X: 0, Y: 0. The coordinates of the second pixel from the left will be X: 1, Y:0. The reason for this is that, in programming, a piece of data from a complex data structure is typically indexed by its offset from where the complex data structure begins. Since the first pixel is also where the pixel data begins, its position is 0, 0.

Infographic: This is a raster image (small cropped image of Mona Lisa's face). Resolution: 70x64px (Width: 70px, height: 64px) = Area: 4480px (4.48 kilopixels, or 0.00448 megapixels). A zoomed version of the version of the image that appears blocky, with the lines and rows of the blocky grid enumerated. A single colored square zoomed in. Coordinates: 13, 8. Horizontal (x): 13. Vertical (y): 8. This is a pixel. it has a single color. A red, green, and blue circles, overlapping like a Venn diagram with a white color at the center. This is a color model. The color of the pixel is decomposed into darker red, green, and blue colored circles, associated with values from 0% to 100% in ramps from black to red, green, and blue, respectively. R, G, B: these are color channels. Red: 36.5%. Green: 18%. Blue: 14.5%. % RGB: 36.5%, 18%, 14.5%. 0..1 RGB: 0.365, 0.18, 0.145. These are binary numbers: 0 = 0; 1 = 1; 2 = 10; 3 = 11; 4 = 100; 7 = 111; 15 = 1111; 31 = 11111; 63 = 111111; 127 = 1111111; 255 = 11111111; This is a color depth: Red: 01011101; Green: 00101110; Blue: 00100101; 8 bits (binary digits) x 3 = 24 bits. G Red: 93 = 255x0.365. Green: 46 = 255x0.18. GBlue: 37 = 255x0.145. These are hexadecimal numbers: 9, 10, 11, 12, 13, 14, 15, 16, 17... in decimal, equals to 9, A, B, C, D, E, F, A0, A1... in hexadecimal. FF = 16x16 - 1 = 256 - 1 = 255. This is a RGB HEX CODE: GRGB: #5D2E25; G Red: 5D; Green: 2E; GBlue: 26; This is uncompressed pixel data in memory: 010111010010111000100101; 8 bits = 1 byte; a single 8-bit RGB tuple = 3 bytes; A 70x64px 8-bit RGB image = 70x64x3 bytes = 4480x3B = 13440B = 13.44KB It takes 13.44 kilobytes of memory to display a tiny 70x64px image. This image resolution is 542x853px. It's consuming 1.39 megabytes of your memory :)
An infographic explaining what is a pixel in a raster image, and what sort of data a pixel contains.

Subpixel

A pixel is the smallest unit of area we have in an image or in a display. This means it's not possible to break a pixel in half. There's on such thing as a half-pixel, or quarter-pixel. It's either one pixel or zero pixels.

However, there techniques to change the color of one pixel to represent the color of things smaller than one pixel contained in it.

For example, let's say that we divide a single pixel into 4 squares. 3 of these squares are white, while 1 square is black. Based on this, we say the color of the pixel should be 25% black, 75% white.

Rectangular Pixels

Non-square pixels are mainly a problem in video, not in images in general. It occurs when the aspect ratio of the camera, and consequently of the video, is different from the aspect ratio of the pixel data, so to compensate you need a pixel aspect ratio different from 1:1.

A simple hypothetical example: let's say I have a camera with an aspect ratio of 16:9 (or 1.77:1). This means if I point the camera at a wall, and record an area that is 16 centimeters wide, then the height of this area should be 9 centimeters. When I play back this video with a project, I should get a 16:9 ratio as well. And this is how it should work in a video player in the computer as well.

However, none of this means the pixel data has to necessarily be 16:9. For example, what if the pixel data was a perfect square? What if I saved the data as 900x900 pixels? This means that some of the color data captured by the camera is "squished" to fit into the smaller pixel data dimensions. When you play it, it has to be un-squished by the same ratio, or it will appear squished.

One reason this may happen is due to the bandwidth or storage space of a medium being too small to carry all the data we need to have the correct ratio. For example, let's say we only have enough bandwidth for 900x900 pixels, but our video is 1600x900. One solution would be to just scale it down maintaining the aspect ratio, then we would have a video of 900x506 pixels. If we did this we would lose a lot of pixel data. By contrast, if we scaled it only horizontally, to 900x900, then we would lose less data, but it would change the aspect ratio.

Comments

Leave a Reply

Leave your thoughts! Required fields are marked *